<template>
    <div class="InvitationCode" :style="'min-height: '+docheight+'px'">
        <div v-if="!showTimeOut&&showCont">
            <div class="codeHead">
                <div class="codeheadCenter">
                  <div class="userImg">
                    <img :src="userInfo.teacher_head_img" />
                  </div>
                  <div class="userInfo">
                    <div class="userName">
                      <div class="userNameLeft">
                        <div>Hi,{{ userInfo.teacher_name }}</div>
                        <div class="statusTag greenTag" v-if="userInfo.service_status==1">上线</div>
                        <div class="statusTag blackTag" v-if="userInfo.service_status==2">下线</div>
                      </div>
                      <div class="statusBtn iconfont icon-set" @click="setFn"></div>            
                    </div>
                    <div class="subMoney">累计提现：{{ userInfo.already_withdrawal }}元</div>
                  </div>    
                </div>
                <div class="carCont" v-if="userInfo.month_data">
                  <div class="carItem">
                    <div class="carName">本月业绩</div>
                    <div class="carText">{{ userInfo.month_data.month_tc }}</div>
                  </div>
                  <div class="carItem">
                    <div class="carName">本月奖金</div>
                    <div class="carText">{{ userInfo.month_data.month_jj }}</div>
                  </div>
                  <div class="carItem">
                    <div class="carName">本月订单</div>
                    <div class="carText">{{ userInfo.month_data.month_order }}</div>
                  </div>
                  <div class="carItem">
                    <div class="carName">总业绩</div>
                    <div class="carText">{{ userInfo.all_data.all_tc }}</div>
                  </div>
                  <div class="carItem">
                    <div class="carName">总奖金</div>
                    <div class="carText">{{ userInfo.all_data.all_jj }}</div>
                  </div>
                  <div class="carItem">
                    <div class="carName">总订单</div>
                    <div class="carText">{{ userInfo.all_data.all_order }}</div>
                  </div>
                </div>
            </div>
            <div class="setCont">
                <div class=""></div>
            </div>
            <div class="mainItem">
                <div class="mainItemName">服务流程</div>
                <ul>
                  <li>客户选套餐下单</li>
                  <li>教师收到订单通知，并前往<span class="redText">需求大厅接单</span></li>
                  <li>在预约服务时间之前到达服务地点联系客户</li>
                  <li>进行<span class="redText">订单核销</span>并开始服务项目</li>
                  <li>服务结束，离开服务地点即可</li>
                </ul>
            </div>
            <div class="mainItem">
                <div class="mainItemName">奖励规则</div>
                <ul>
                  <li>每服务一单，若用户给出五星+10字以上好评，可额外奖励<span class="redText">20元</span>。</li>
                  <li>项目提成高达每一单<span class="redText">80%</span>；</li>
                </ul>
            </div>
            <div class="mainItem">
                <div class="mainItemName">惩罚规则</div>
                <ul>
                  <li>若存在线下交易、偷盗、胡乱打卡等<span class="redText">违规行为</span>。一经发现，将<span class="redText">扣除300元</span>保证金，并永久<span class="redText">停封账号</span>永远终止合作。</li>
                  <li>若已接单，未经过客户协商，私自<span class="redText">爽约</span>情况，<span class="redText">扣除100元</span>保证金。</li>
                </ul>
            </div>
            <div class="mainItem">
                <div class="mainItemName">教师守则</div>
                <ul>
                    <li>专业素养：我们的家教人员都是经验丰富、资质合格的专业教育人士，具备良好的学科知识和教学技能。</li>
                    <li>诚实守信：我们承诺遵循诚实守信的原则，按照约定的时间和地点为学生提供高质量的家教服务，不迟到、不早退。</li>
                    <li>个性化教学：我们根据学生的学科水平、学习习惯和需求，量身定制个性化的教学计划，帮助他们更好地理解和掌握知识。</li>
                    <li>尊重学生：我们尊重学生的个性和差异，采用鼓励和尊重的教育方式，激发他们学习的兴趣和动力。</li>
                    <li>保护学生隐私：我们严格遵守隐私保护原则，绝不泄露学生的个人信息，确保学生的隐私安全。</li>
                    <li>与家长沟通：我们与学生家长保持良好的沟通，定期反馈学生的学习情况，共同探讨学科进展和改进方法。</li>
                    <li>安全第一：在教学过程中，我们注重学生的安全，确保学习环境安全有序，杜绝任何可能的安全隐患。</li>
                    <li>提供进步反馈：我们及时向学生和家长提供学科进步的反馈，鼓励学生继续努力，帮助他们建立自信心。</li>
                    <li>教育责任心：我们以高度的责任心对待教育工作，愿意为学生提供额外的辅导和指导，帮助他们克服学习难题。</li>
                </ul>
            </div>
            <sub-load v-if="showLoad"></sub-load>
        </div>
        <footcpm></footcpm>
        <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>
        <getLoad v-if="!showCont"></getLoad>
        <getTimeOut v-if="showTimeOut"></getTimeOut>
    </div>
  </template>
  
  <script>
    import {Toast } from 'vux'
    import SaveBtn from '@/components/public/saveBtn.vue'
    import subLoad from '@/components/public/subLoad.vue'
    import getLoad from '@/components/public/getLoad'
    import getTimeOut from '@/components/public/getTimeOut'
    import footcpm from '@/components/footcpm'
    import { index } from '@/http/api'
    export default {
      components: {getTimeOut,getLoad,subLoad,Toast,SaveBtn,footcpm},
      data() {
        return {
            showTimeOut: false,
            showCont:false,
            showLoad:false,
            showText:'',
            showToast:false,
            showPicker:false,
            code:'',
            userInfo:{},
        }
      },
      props: {},
      methods:{
        onConfirm(item){
          this.type = item.text
          this.typeVal = item.value
          this.showPicker = false
        },
        setFn(){
          this.$router.push({path:'/linkProduct'})
        },
        getData(){
            let data = {}
            index(data).then((res)=>{
                this.showCont= true
                if(res.data.code==1){
                    this.userInfo= res.data.data
                }else{
                    this.showToast = true
                    this.showText = '数据获取失败'
                }
            }).catch(()=>{
            this.showTimeOut = true
            this.showCont= true
          })
        },
      },
      mounted(){
      },
      created() {
        this.getData()
      },
    }
  </script>
  
  <style scoped lang="less">
  .InvitationCode{
    width: 100%;
    background-color: #f7f8fa;
    box-sizing: border-box;
    padding-bottom: 3.25rem;
    padding-top: 1rem;
    .codeHead{
        padding: 0.75rem;
        box-sizing: border-box;
        width: 92%;
        background-color: #fff;
        margin:0 auto 1rem;
        border-radius: 0.25rem;
        .codeheadCenter{
          font-size: 0.8rem;
          font-weight: bold;
          margin: 0.75rem 0;
          display: flex;
          position: relative;
          .userImg{
            width: 3.75rem;
            width: 3.75rem;
            font-size: 0px;
            margin-right: 0.75rem;
            border-radius: 50%;
            img{
              width: 100%;
              border-radius: 50%;
            }
          }
          .userInfo{
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: 1;
            width: 2rem;
            .userName{
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .userNameLeft{
                display: flex;
                align-items: center;
                .statusTag{
                  padding: 0.1rem 0.5rem;
                  background-color: #6455d4;
                  font-size: 0.6rem;
                  color: #fff;
                  border-radius: 0.1rem;
                  font-weight: normal;
                  margin-left: 0.75rem;
                }
                .blackTag{
                  background-color: #ebebeb;
                  color: #666;
                }
                .greenTag{
                  background-color: #85CE61;
                  color: whtie;
                }
              }
              .statusBtn{
                font-size: 0.6rem;
                font-size: 1rem;
                color: #6455d4;
              }
            }
            .infoDes,.subMoney{
              font-size: 0.6rem;
              color: #6455d4;
              margin-top: 0.3rem;
              font-weight: normal;
              span{
                margin-right: 0.25rem;
              }
            }
            .infoDes{
              color: #666;
            }
          }
        }
        .carCont{
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          padding: 0.75rem 0;
          .carItem{
            width: 30%;
            // background-color: #6455d4;
            // color: white;
            text-align: center;
            margin-bottom: 0.75rem;
            padding: 0.75rem;
            box-sizing: border-box;
            border-radius: 0.5rem;
            font-size: 0.7rem;
            .carText{
              margin-top: 0.25rem;
              font-size: 1rem;
              // font-weight: bold;
            }
          }
        }
        .codeInput{
            padding-top: 0.75rem;
        }
    }
    .mainItem{
      width: 92%;
      border-radius: 0.25rem;
      background-color: #fff;
      padding: 0.75rem;
      box-sizing: border-box;
      margin: 0.75rem auto;
      .mainItemName{
        text-align: center;
        font-size: 0.8rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
      }
      ul{
        list-style: outside;
        padding-left: 1rem;
        box-sizing: border-box;
        .redText{
          color: #F56C6C;
        }
      }
    }
  }
  </style>
  <style>
    .InvitationCode .van-cell::after{
        border-bottom: none;
    }
  </style>
  